<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="department-box box-card">
        <div>
          <DeptsOption :row="company" :is-root="true" @addDept="addDeptFn" />
          <!-- 树形空间 -->
          <el-tree :data="depts" :props="defaultProps" :default-expand-all="true">
            <template scope="scope">
              <DeptsOption :row="scope.data" @ondel="getDepartments" @addDept="addDeptFn" @editDept="editDeptFn" />
            </template>
          </el-tree>
        </div>
      </el-card>
    </div>
    <!-- 添加部门弹出框  --- 驼峰转横线-->
    <add-dept ref="addDept" :show-dialog.sync="dialogVisible" :row="deptRow" @add-success="getDepartments" />
  </div>
</template>

<script>
import { getDepartmentsAPI } from '@/api/departments' // 请求
import { getTreeList } from '@/utils/index' // 递归方法
import DeptsOption from './components/depts-option.vue' // 子组件
import AddDept from './components/dept-add.vue'
export default {
  name: 'Departments',

  components: {
    DeptsOption,
    AddDept
  },
  data() {
    return {
      // defaultProps 配置树形控件 显示的数据和子节点
      defaultProps: {
        label: 'name' // label配置显示数据
      },
      depts: [], // 部门信息
      company: {}, // 公司名称
      dialogVisible: false,
      deptRow: {} // 点击添加部门那一行的数据
    }
  },

  created() {
    this.getDepartments()
  },

  methods: {
    // 获取部门数据
    async getDepartments() {
      const res = await getDepartmentsAPI()
      this.company = { name: res.companyName, manager: '负责人', children: getTreeList('', res.depts) }
      this.depts = getTreeList('', res.depts)
    },
    // 添加子部门
    addDeptFn(data) {
      this.deptRow = data // 将当前一行的数据传过去
      this.dialogVisible = true // 显示弹框
    },
    // 编辑部门
    editDeptFn(data) {
      this.deptRow = data // 将当前一行的数据传过去
      this.dialogVisible = true // 显示弹框
      setTimeout(() => {
        this.$refs.addDept.setDept()
      })
      // this.$nextTick(){
      //  this.$refs.addDept.setDept()
      // }
    }
  }
}
</script>

<style scoped lang='scss'>
.department-box {

 .el-tree {
   margin-top: 10px;
   color: #000;
   border-top: 1px solid #999;
   .el-tree-node__content{
    .el-tree-node__expand-icon {
        color: #000!important;
      }
   }
 }
}
</style>
